<!-- Start sidebar menu: : style can be found in sidebar.less -->

<style type="text/css">
    .ilike{
        color: rgb(182, 162, 222);
    }

    .js-i-like:hover{
        color: rgb(46, 199, 201);
    }

    .treeview-menu li a i.fa-heart-o{
        display: none;
    }

    .treeview-menu li a:hover i.fa-heart-o{
        display: block;
    }

</style>

<{foreach from=$beforeAction.Menu.0 item=item}>
    <{if isset($beforeAction.Menu[$item.MenuID])}>
    <ul class="sidebar-menu" for="<{$item.MenuID}>" style="display: none;">
        <li class="treeview" id="favorite-li">
            <a href="#">
                <i class="fa fa-heart"></i> <span>Favorite</span>
                <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu" id='favorite-ul'></ul>
        </li>
        <{foreach from=$beforeAction.Menu[$item.MenuID] item=ii}>
        <{if $ii.Visible == 1}>
        <{if isset($beforeAction.Menu[$ii.MenuID])}>
        <li id="menu_id_<{$ii.MenuID}>" class="treeview">
            <a href="#">
                <{if !empty($ii.MenuIcon)}><{$ii.MenuIcon nofilter}><{else}><i class="fa fa-th"></i><{/if}>
                <span><{$ii.MenuName}></span>
                <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
                <{foreach from=$beforeAction.Menu[$ii.MenuID] item=iii}>
                <{if $iii.Visible == 1}>
                <li id="menu_id_<{$iii.MenuID}>">
                    <{if $iii.MenuUrl === 'javascript:;'}>
                    <a href="javascript:;" class="disabled"><i class="fa fa-angle-double-right"></i> <{$iii.MenuName}><i class="fa pull-right js-i-like" like="<{$iii.MenuID}>"></i></a>
                    <{else}>
                    <a href="<{$iii.MenuUrl}>"><i class="fa fa-angle-double-right"></i> <{$iii.MenuName}><i class="fa pull-right js-i-like" like="<{$iii.MenuID}>"></i></a>
                    <{/if}>
                </li>
                <{/if}>
                <{/foreach}>
            </ul>
        </li>
        <{else}>
        <li id="menu_id_<{$ii.MenuID}>">
            <a href="<{$ii.MenuUrl}>">
                <{if !empty($ii.MenuIcon)}><{$ii.MenuIcon nofilter}><{else}><i class="fa fa-th"></i><{/if}>
                <span><{$ii.MenuName}></span>
            </a>
        </li>
        <{/if}>
        <{/if}>
        <{/foreach}>
        <!--
        <li>
            <a href="pages/calendar.html">
                <i class="fa fa-calendar"></i> <span>Calendar</span>
                <small class="badge pull-right bg-red">3</small>
            </a>
        </li>
        <li>
            <a href="pages/mailbox.html">
                <i class="fa fa-envelope"></i> <span>Mailbox</span>
                <small class="badge pull-right bg-yellow">12</small>
            </a>
        </li>
        -->
    </ul>
    <{/if}>
<{/foreach}>

<script>
    $(function(){

        $('body').on('click', '.js-i-like', function(){
            var sel    = $(this)
            var like_id = $(this).attr('like')
            var url = '/home/?r=Site/ilike'
            
            $.post(url, { like_id : like_id }, function(data){

                if( data.status == 1 ){
                    sel.removeClass('fa-heart-o').addClass('fa-heart ilike')
                    sel.parents('li').eq(0).clone().removeClass('active').attr('id', 'fav-'+like_id).appendTo('#favorite-ul').hide().fadeIn()
                }else if(data.status == 2){
                    sel.removeClass('fa-heart ilike').addClass('fa-heart-o')
                    $('#favorite-ul').find('#fav-'+like_id).fadeOut('slow', function(){$(this).remove()})
                    $('#menu_id_'+like_id).find('i.ilike').removeClass('fa-heart ilike').addClass('fa-heart-o')
                }else{
                    alert('操作失败')
                }

            }, 'json')
            
            return false
        })

        var Favorite = $.parseJSON('<{$Favorite nofilter}>'),
                hasFav = false;

        $('.treeview-menu .js-i-like').each(function(){
            var tmpid = $(this).attr('like')

            if($.inArray(tmpid, Favorite) != -1 ){
                $(this).addClass('fa-heart ilike')
                var tmpID = $(this).attr('like')
                $(this).parents('li').eq(0).clone().attr('id', 'fav-'+tmpID).appendTo('#favorite-ul')
                hasFav = true;
            }else{
                $(this).addClass('fa-heart-o')
            }

        })

        if(hasFav){
            $("#favorite-li").addClass('active');
        }

        var activeMenu = $("#menu_id_<{$beforeAction.Current.MenuID}>");

        activeMenu.addClass('active');
        activeMenu.closest('.treeview').addClass('active');
        var topMenuId = activeMenu.closest('.sidebar-menu').attr('for');
        $(".sidebar .treeview").tree();

        var topMenu = $(".top-menu");


        topMenu.click(function(){
            var theMenu = $(this).attr('key'),
                    sideMenu = $(".sidebar-menu"),
                    menuInfo = $(this).data('menu');

            $(".top-menu").removeClass('active');
            $(this).addClass('active');

            $(".sidebar-menu").hide().filter("[for='"+theMenu+"']").show();
        });

        if (topMenu.filter('[key="'+topMenuId+'"]').length > 0){
            topMenu.filter('[key="'+topMenuId+'"]').click();
        }else{
            topMenu.first().click();
        }
    });
</script>
<!-- End sidebar menu: : style can be found in sidebar.less -->

<style>
    .treeview-menu > li > a.disabled{
        cursor: not-allowed;
    }
</style>